<template>
    <div>
        <h2>{{ `专柜:${name} 的续租记录` }}</h2>
        <el-table
            :data="tableData.slice((page - 1) * pageSize, page * pageSize)"
            stripe
            border
            :default-sort="{ prop: 'date', order: 'descending' }"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="date" label="续租日期" sortable></el-table-column>
            <el-table-column prop="month" label="续租月数" sortable>
                <template slot-scope="scope">
                    <el-form :model="scope.row" ref="form" v-if="scope.row.editable">
                        <el-form-item
                            prop="month"
                            :rules="[
                                { required: true, message: '请输入续租期限', trigger: 'blur' },
                                { type: 'integer', min: 1, max: 120, message: '续租期限必须在 1 至 120 之间的整数', trigger: 'blur' }
                            ]"
                        >
                            <el-input-number v-model.number="scope.row.month" placeholder="请输入续租期限" :min="1" :max="120" size="mini"></el-input-number>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{ scope.row.month }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" v-if="!scope.row.editable && role === 'AD'" @click="edit(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" v-if="!scope.row.editable && role === 'AD'" @click="del(scope.row)">删除</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.editable && role === 'AD'" @click="save(scope.row)">确定</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.editable && role === 'AD'" @click="cancel(scope.row)">取消</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row type="flex" justify="space-between" :gutter="20" style="padding: 10px 0">
            <el-col :span="4">
                <el-button @click="$router.push('/counterList')" type="primary">返回</el-button>
            </el-col>
            <el-col :span="20">
                <el-pagination
                    background
                    style="float: right"
                    layout="prev, pager, next, sizes, total, jumper"
                    :page-sizes="[1, 5, 10, 15, 20]"
                    :page-size="pageSize"
                    :current-page="page"
                    :total="tableData.length"
                    @current-change="val => (page = val)"
                    @size-change="val => (pageSize = val)"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
    props: {
        id: { require: true },
        name: ''
    },
    data() {
        return {
            loading: false,
            tableData: [],
            page: 1,
            pageSize: 10
        }
    },
    computed: {
        role() {
            return this.$store.getters.user.role
        }
    },
    methods: {
        async fetch() {
            const res = await this.$http.get(`/renewalList/${this.id}`)
            if (res && res.code === 0) {
                this.tableData = res.returnObject ? res.returnObject : []
            }
        },
        edit(row) {
            const renewal = this.tableData.find(item => item.id === row.id)
            renewal.oldValue = JSON.stringify(row)
            this.$set(renewal, 'editable', true)
        },
        cancel(row) {
            const index = this.tableData.findIndex(item => item.id === row.id)
            this.$set(this.tableData, index, JSON.parse(this.tableData[index].oldValue))
        },
        async save(row) {
            this.$refs.form.validate(async valid => {
                if (!valid) return false
                const res = await this.$http.put(`/renewal/${row.id}`, { month: row.month })
                if (res && res.code === 0) {
                    this.$message.success('修改成功')
                    row.editable = false
                }
            })
        },
        del(row) {
            this.$confirm(`删除 ${row.date} 续租的 ${row.month} 个月, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    const res = await this.$http.delete(`/renewal/${row.id}`)
                    if (res && res.code === 0) {
                        this.tableData.splice(this.tableData.findIndex(item => item.id === row.id), 1)
                        this.$message.success('删除成功')
                    }
                })
                .catch(() => {})
        }
    },
    created() {
        this.id && this.fetch()
    }
}
</script>

<style scoped>
h2 {
    text-align: center;
}
</style>
